<template>
  <div>
    <el-dialog :title="obj.isAdd?'菜单添加':'菜单编辑'" :visible.sync="obj.isTrue" width="40%" @close="cancel()">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="上级菜单">
          <el-select v-model="form.pid" placeholder="请选择上级菜单" @change="chanegPid()">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option v-for="item in list" :key="item.id" :label="item.title" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型">
            <el-radio :label="1" v-model="form.type" disabled>目录</el-radio>
            <el-radio :label="2" v-model="form.type" disabled>菜单</el-radio>
        </el-form-item>
        <el-form-item label="菜单图标" v-if="form.type==1">
          <el-select v-model="form.icon" placeholder="请选择菜单图标">
            <el-option v-for="(item,index) in iconArr" :key="index" :value="item">
              <i :class="item"></i>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单地址" v-else>
          <el-select v-model="form.url" placeholder="请选择菜单地址">
            <el-option v-for="(item,index) in secondRouter" :key="index" :label="item.meta.title" :value="'/' + item.path"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="add()" v-if="obj.isAdd">添 加</el-button>
        <el-button type="primary" @click="enterEdit()" v-else>编 辑</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {secondRouter} from "../../../router/index"
import {menuAdd,menuInfo,menuEdit} from "../../../request/api"
import {successAlert,warningAlert} from "../../../utils/alert"
export default {
  props: ["obj"],
  components: {},
  data() {
    return {
      form: {
        pid:0,
        title:"",
        icon:"",
        type:1,
        url:"",
        status:1
      },
      // 用来渲染菜单图标的
      iconArr:["el-icon-help","el-icon-picture-outline-round","el-icon-camera","el-icon-goods","el-icon-delete"],
      // 用来渲染菜单地址的
      secondRouter:secondRouter
    };
  },
  computed: {
    ...mapGetters({
      list:"menu/list"
    }),
  },
  methods: {
    ...mapActions({
      asyncList:"menu/asyncList"
    }),
    // 清空
    empty(){
      this.form = {
        pid:0,
        title:"",
        icon:"",
        type:1,
        url:"",
        status:1
      }
    },
    // 点击取消
    cancel(){
      // 1、清空form中的数据
      this.empty()
      // 2、关闭遮罩层
      this.obj.isTrue = false
    },
    // 当上级菜单发生变化
    chanegPid(){
      if(this.form.pid == 0){
        // 说明你要添加的是目录
        this.form.type = 1
        // 清空上一次你选择的地址
        this.form.url = ""
      }else{
        // 说明你要添加的是菜单
        this.form.type = 2
        // 清空上一次你选择的图标
        this.form.icon = ""
      }
    },
    // 点击添加
    add(){
      menuAdd(this.form).then(res=>{
        if(res.data.code == 200){
          // 添加成功
          successAlert(res.data.msg)
          // 清空form并关闭对话框
          this.cancel()
          // 刷新menu的列表
          this.asyncList()
        }else{ 
          // 添加失败
          warningAlert(res.data.msg)
        }
      })
    },
    // 获取一条信息
    getOne(id){
      menuInfo({id:id}).then(res=>{
        // 给form赋值
        this.form = res.data.list
        // 给form添加id字段，因为后面确定编辑的时候需要用到
        this.form.id = id
      })
    },
    // 确定编辑
    enterEdit(){
      menuEdit(this.form).then(res=>{
        if(res.data.code == 200){
          // 成功提示窗
          successAlert(res.data.msg)
          // 关闭当前遮罩层并清空数据
          this.cancel()
          // 重新请求列表数据
          this.asyncList()
        }else{
          // 失败提示窗
          warningAlert(res.data.msg)
        }
      })
    }
  },
  mounted() {},
};
</script>
<style scoped>
</style>